
    <div class="container"  id="step">
        <div class="row">
            <div class="col-md-8">
                <article>
                    <h2 class="tutorial__heading">Step Chart</h2>
                    <div class="js-step-chart-container card--chart"></div>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
// StepChart without Axis Labels:
stepChart
    .width(500)
    .height(300);
stepContainer.datum(dataset).call(stepChart);

// StepChart with Axis Labels:
// If the labels get cutoff when added, it's a good idea
// to tweak the left margin to get the look you want
stepChart
    .width(500)
    .height(300)
    .xAxisLabel('Fruit Type')
    .xAxisLabelOffset(45)
    .yAxisLabel('Quantity')
    .yAxisLabelOffset(-45)
    .margin({
        top: 20,
        right: 20,
        bottom: 30,
        left: 65
    });
stepContainer.datum(dataset).call(stepChart);
                </code></pre>
                <h4>Data Input</h4>
                <p>Check the <a href="/britecharts/global.html#StepChartData__anchor">data input schema</a> of this chart.</p>
                <h4>Export Chart</h4>
                <p>You can also export this chart by pressing: <input id="button" type="button" value="Export" class="btn btn-sm btn-primary" /></p>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-step.js">in github</a></p>
            </div>
        </div>
    </div>

